<div class="upload-media p-5">
  <ngx-file-drop
    dropZoneLabel="Drop files here"
    (onFileDrop)="dropped($event)"
    [multiple]="true"
    accept=".png,.jpg,.jpeg,.svg,.gif"
  >
    <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
      @if (files.length) {
        <div class="grid grid-cols-12 gap-2 w-full">
          @for (item of filesEntry; track $index) {
            @if (files[$index]) {
              <div class="col-span-3">
                <img
                  class="w-full aspect-[4/3] object-cover rounded"
                  [src]="files[$index].uri.url"
                  alt=""
                />
              </div>
            }
          }
        </div>
      } @else {
        <div class="flex flex-col gap-5 justify-center items-center">
          <app-icon class="opacity-80 upload-icon" [content]="{ svg: 'cloud-arrow-up-outline' }" />
          <span class="text-sm">选择媒体批量上传</span>
          <app-btn
            (click)="openFileSelector()"
            [content]="{
              label: '选择图片',
              mode: 'raised',
              color: 'primary',
              icon: { svg: 'selection-search' },
            }"
          />
        </div>
      }
    </ng-template>
  </ngx-file-drop>
  <div class="upload-table w-full box-border my-5 text-sm text-gray-500">
    <div class="flex flex-col gap-3">
      @for (item of filesEntry; track $index) {
        <mat-divider class="my-3" />
        <div class="flex justify-between items-center gap-2 truncate">
          <div class="flex items-center gap-2">
            @if (files[$index]) {
              <app-icon [content]="{ svg: 'check', color: 'primary' }" />
            } @else {
              <app-spinner [content]="{ color: 'primary', size: 24 }" />
            }
            <div class="text-gray-700">{{ item.relativePath }}</div>
            @if (files[$index]) {
              <div>
                {{ files[$index].filesize | bytes: 2 }}
              </div>
            }
          </div>

          @if (files[$index]) {
            <app-icon
              (click)="onCopy(files[$index].uri.url)"
              class="cursor-pointer"
              [content]="{ svg: 'content-copy' }"
            />
          }
        </div>
      }
    </div>
  </div>
</div>
